import { userContext } from "@/components/provider/user.context"
import serviceUser from "@/services/service.user"
import { LockOutlined, UserOutlined } from "@ant-design/icons"
import { Button, Card, Form, Input } from "antd"
import React, { useCallback, useContext } from "react"
import md5 from "js-md5"
import lsFunc from "@/utils/ls.func"

import "./login.less"
import { PageProps } from "@/interfaces/app.interface"

const AuthLogin = (props: PageProps) => {
	const { history } = props
	const { dispatch } = useContext(userContext)
	const onFinish = useCallback(data => {
		console.log(md5(data.password))
		// let { username, password } = data
		// const newpassword = CryptoJS.MD5(password)
		serviceUser
			.loginIn({ username: data.username, password: md5(data.password) })
			.then(res => {
				if (res.code == 200) {
					lsFunc.setItem("token", res.data)
					return serviceUser.getUserInfo({})
				}
			})
			.then(res => {
				if (res.code == 200) {
					dispatch({
						type: "set",
						payload: {
							user: res.data
						}
					})
					history.replace("/home/dashboard.html")
				}
			})
	}, [])

	return (
		<div id="AuthLogin" className="full">
			<Card className="login-content">
				<div className="login-logo">
					<img src={require("../../assets/images/login/loginLog.png")} alt="logo" />
				</div>

				<div className="login-form">
					<div className="login-title">展会内容管理后台</div>
					<Form labelCol={{ span: 4 }} onFinish={onFinish}>
						<Form.Item name="username" rules={[{ required: true, message: "请输入帐号!" }]} className="login-input">
							<Input
								prefix={<UserOutlined />}
								placeholder="请输入帐号"
								style={{ color: "#999999" }}
								className="formItem"
							/>
						</Form.Item>
						<Form.Item name="password" rules={[{ required: true, message: "请输入密码!" }]} className="login-input">
							<Input.Password
								prefix={<LockOutlined />}
								style={{ color: "#999999" }}
								type="password"
								placeholder="请输入密码"
							/>
						</Form.Item>
						<Form.Item>
							<Button type="primary" htmlType="submit" block className="login-btn">
								登录
							</Button>
						</Form.Item>
					</Form>
				</div>
			</Card>
		</div>
	)
}
AuthLogin.title = "登录"
export default AuthLogin
